<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">语音转文字</button>
		<div class="content"></div>
		<!-- <script src="./index.js"></script> -->
		<script>
			const grammar =
				"#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
			const recognition = new SpeechRecognition();
			const speechRecognitionList = new SpeechGrammarList();
			speechRecognitionList.addFromString(grammar, 1);
			recognition.grammars = speechRecognitionList;
			recognition.continuous = false;
			recognition.lang = "en-US";
			recognition.interimResults = false;
			recognition.maxAlternatives = 1;

			const diagnostic = document.querySelector(".output");
			const bg = document.querySelector("html");

			document.body.onclick = () => {
				recognition.start();
				console.log("Ready to receive a color command.");
			};

			recognition.onresult = (event) => {
				const color = event.results[0][0].transcript;
				diagnostic.textContent = `Result received: ${color}`;
				bg.style.backgroundColor = color;
			};
		</script>
	</body>
</html>